<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <el-icon>
                    <Back />
                </el-icon>
            </div>
            <crumbs basetitle="设置" title="人员设置" :title1="title"></crumbs>
        </div>
        <div class="tab">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane class="el-tab-pane1" label="员工管理" name="first">
                    <div class="tab_l" v-if="globalProperties.roleflag === 2">
                        <el-card>
                            <div class="content">
                                <div class="company" @click="searchall" style="cursor: pointer">
                                    <!-- <div class="company" style="cursor: pointer"> -->
                                    <span style="
                                            font-size: 14px;
                                            font-family: PingFang SC-Semibold,
                                                PingFang SC;
                                            font-weight: 600;
                                        ">蓝豚跃动</span>
                                    <img @click="adddepartment" src="../../assets/image/添加部门.png" alt="" />
                                </div>
                                <el-tree :data="dataSource" node-key="id" default-expand-all
                                    :expand-on-click-node="false" @node-click="clicktree">
                                    <template #default="{ node, data }">
                                        <el-icon style="margin-right: 10px">
                                            <FolderOpened />
                                        </el-icon>
                                        <span class="custom-tree-node">
                                            <span>{{ node.label }}</span>
                                            <!--                      <span>{{-->
                                            <!--                        data.children ? data.children.length : ""-->
                                            <!--                      }}</span>-->
                                            <div @click.stop>
                                                <el-popover placement="bottom" :width="200" trigger="click">
                                                    <div class="powertext">
                                                        <a @click="
                                                            append(data)
                                                            ">
                                                            添加子分组
                                                        </a>
                                                    </div>
                                                    <div class="powertext">
                                                        <a @click="
                                                            changedepartmentname(
                                                                node,
                                                                data
                                                            )
                                                            ">修改</a>
                                                    </div>
                                                    <div class="powertext">
                                                        <a @click="
                                                            remove(
                                                                node,
                                                                data
                                                            )
                                                            ">
                                                            删除
                                                        </a>
                                                    </div>
                                                    <template #reference>
                                                        <img class="imga" src="../../assets/image/组87.png" alt="" />
                                                        <img class="imgb" src="../../assets/image/组871.png" alt="" />
                                                    </template>
                                                </el-popover>
                                            </div>
                                        </span>
                                    </template>
                                </el-tree>
                            </div>
                        </el-card>
                    </div>
                    <div class="tab_r" v-if="globalProperties.roleflag === 2">
                        <el-card>
                            <div class="content">
                                <div class="flexvetweenbox">
                                    <h2 style="
                                            display: flex;
                                            align-items: center;
                                        ">
                                        {{ teamname
                                        }}<img @click="editdeptskzhtcopen" v-if="depttype === 1" style="
                                                width: 20px;
                                                height: 20px;
                                                margin-left: 10px;
                                            " src="../../assets/image/dept-edit-icon.png" alt="" />
                                    </h2>
                                    <div class="flex gap-16px">
                                        <!-- <div class="blue" style="
                                                font-size: 16px;
                                                cursor: pointer;
                                                display: flex;
                                                align-items: center;
                                            " @click="toaddjobpop">
                                            <img style="
                                                    width: 16px;
                                                    height: 16px;
                                                " src="../../assets/image/addjobicon.png" alt="" />
                                            <div style="margin-left: 5px">
                                                加入申请
                                            </div>
                                        </div> -->
                                        <div class="blue" style="
                                                font-size: 16px;
                                                cursor: pointer;
                                                display: flex;
                                                align-items: center;
                                            " @click="toDepartingmembers">
                                            <IconCusoutjobicon></IconCusoutjobicon>
                                            <div style="margin-left: 5px">
                                                已离职成员
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                    ">
                                    <el-input style="width: 220px" clearable v-model="input3" class="w-50 m-2"
                                        placeholder="请输入成员名称/部门分组" :prefix-icon="Search" @input="searchnameanddept" />
                                    <el-button type="primary" @click="addstaff" style="
                                            background-color: rgba(
                                                62,
                                                95,
                                                245,
                                                1
                                            );
                                            color: rgba(255, 255, 255, 1);
                                        ">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                        新建员工
                                    </el-button>
                                </div>
                                <div style="
                                        display: flex;
                                        align-items: center;
                                        margin-top: 20px;
                                    ">
                                    <div style="padding-right: 12px">
                                        <img style="margin-right: 10px" src="../../assets/image/组221.png" alt="" /><span
                                            class="blue">{{
                                                total }}名</span><span>成员</span>
                                    </div>
                                    <!-- <div>
                    <img
                      style="margin-right: 10px; padding-left: 12px"
                      src="../../assets/image/组222.png"
                      alt=""
                    /><span>数据最后更新时间：2023-03-11 17:48</span>
                  </div> -->
                                </div>
                                <div style="margin-top: 16px" class="table-list">
                                    <el-table :data="depuser" style="width: 100%; height: 460px" :header-cell-style="{
                                        background: '#FAFAFC',
                                        color: '#202536'
                                    }">
                                        <el-table-column prop="nickName" label="姓名">
                                            <template #default="scope">
                                                <div style="
                                                        display: flex;
                                                        align-items: center;
                                                    ">
                                                    <img style="
                                                            width: 30px;
                                                            margin-right: 5px;
                                                            border-radius: 50%;
                                                        " crossorigin="anonymous" :src="scope.row.avatar" alt="" />
                                                    <span>{{
                                                        scope.row.nickName
                                                    }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="phonenumber" label="手机号" align="center" width="200" />
                                        <el-table-column prop="date" label="分组" align="center">
                                            <template #default="scope">
                                                <div>
                                                    {{
                                                        scope.row.dept
                                                            ?.deptName ?? "暂无"
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="date" label="角色" align="center
                    ">
                                            <template #default="scope">
                                                <div style="text-align: center">
                                                    {{
                                                        scope.row.roles
                                                            .length === 0
                                                            ? "暂无"
                                                            : scope.row.roles[0]
                                                                .roleName
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="sex" label="性别" width="40">
                                            <template #default="scope">
                                                <div>
                                                    {{
                                                        scope.row.sex === "0"
                                                            ? "男"
                                                            : "女"
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="entryTime" label="入职时间" width="230">
                                            <!-- <template #default="scope">
                        <div>
                          {{ scope.row.sex === "0" ? "男" : "女" }}
                        </div>
                      </template> -->
                                        </el-table-column>
                                        <el-table-column prop="address" label="状态">
                                            <template #default="scope">
                                                <div>
                                                    {{
                                                        scope.row.status === "0"
                                                            ? "在职"
                                                            : "离职"
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column fixed="right" label="操作" width="150">
                                            <template #default="scope">
                                                <el-button link type="primary" style="
                                                        color: rgba(
                                                            62,
                                                            95,
                                                            245,
                                                            1
                                                        );
                                                    " @click="
                                                        changeuser(scope.row)
                                                        ">详情
                                                </el-button>
                                                <el-button link type="primary" style="
                                                        color: rgba(
                                                            62,
                                                            95,
                                                            245,
                                                            1
                                                        );
                                                    " @click="
                                                        changeuserc(scope.row)
                                                        ">修改
                                                </el-button>
                                                <el-button v-if="scope.row.status!=='0'" link type="primary" style="
                                                        color: rgba(
                                                            234,
                                                            0,
                                                            0,
                                                            1
                                                        );
                                                    " @click="
                                                        removeuser(scope.row)
                                                        ">删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <div class="pagination">
                    <el-pagination
                      v-model:current-page="currentPage"
                      v-model:page-size="pageSize"
                      :page-sizes="[10, 30, 50]"
                      layout="total, sizes, prev, pager, next"
                      :total="total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    />
                  </div> -->
                                    <pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
                                        @SizeChange="handleSizeChange" @CurrentChange="handleCurrentChange">
                                    </pagination>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div class="wmax" v-if="globalProperties.roleflag === 1">
                        <el-card>
                            <div class="content">
                                <div class="flexvetweenbox">
                                    <h2>{{ teamname }}</h2>
                                    <div class="flex gap-16px">
                                        // <div class="blue"
                                            style="font-size: 16px;cursor: pointer;display: flex;align-items: center;"
                                            @click="toaddjobpop">
                                            // <img style=" width: 16px;height: 16px;"
                                                src="../../assets/image/addjobicon.png" alt="" />
                                            // <div style="margin-left: 5px">
                                                // 加入申请
                                                // </div>
                                            // </div>
                                        <div class="blue" style="
                                                font-size: 16px;
                                                cursor: pointer;
                                                display: flex;
                                                align-items: center;
                                            " @click="toDepartingmembers">
                                            <IconCusoutjobicon></IconCusoutjobicon>
                                            <div style="margin-left: 5px">
                                                已离职成员
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                    ">
                                    <div></div>
                                    <el-button type="primary" @click="addstaff" style="
                                            background-color: rgba(
                                                62,
                                                95,
                                                245,
                                                1
                                            );
                                            color: rgba(255, 255, 255, 1);
                                        ">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                        新建员工
                                    </el-button>
                                </div>
                                <div style="
                                        display: flex;
                                        align-items: center;
                                        margin-top: 20px;
                                    ">
                                    <div style="padding-right: 12px">
                                        <img style="margin-right: 10px" src="../../assets/image/组221.png" alt="" /><span
                                            class="blue">{{
                                                total }}名</span><span>成员</span>
                                    </div>
                                    <!-- <div>
                    <img
                      style="margin-right: 10px; padding-left: 12px"
                      src="../../assets/image/组222.png"
                      alt=""
                    /><span>数据最后更新时间：2023-03-11 17:48</span>
                  </div> -->
                                </div>
                                <div style="margin-top: 16px" class="table-list">
                                    <el-table :data="depuser" style="width: 100%; height: 460px" :header-cell-style="{
                                        background: '#FAFAFC',
                                        color: '#202536'
                                    }">
                                        <el-table-column prop="nickName" label="姓名">
                                            <template #default="scope">
                                                <div style="
                                                        display: flex;
                                                        align-items: center;
                                                    ">
                                                    <img style="
                                                            width: 30px;
                                                            margin-right: 5px;
                                                            border-radius: 50%;
                                                        " crossorigin="anonymous" :src="scope.row.avatar" alt="" />
                                                    <span>{{
                                                        scope.row.nickName
                                                    }}</span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="phonenumber" label="手机号" align="center" width="200" />
                                        <el-table-column prop="date" label="分组" align="center">
                                            <template #default="scope">
                                                <div>
                                                    {{
                                                        scope.row.dept
                                                            ?.deptName ?? "暂无"
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="date" label="角色" align="center
                    ">
                                            <template #default="scope">
                                                <div style="text-align: center">
                                                    {{
                                                        scope.row.roles
                                                            .length === 0
                                                            ? "暂无"
                                                            : scope.row.roles[0]
                                                                .roleName
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="sex" label="性别" width="40">
                                            <template #default="scope">
                                                <div>
                                                    {{
                                                        scope.row.sex === "0"
                                                            ? "男"
                                                            : "女"
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="entryTime" label="入职时间" width="230">
                                            <!-- <template #default="scope">
                        <div>
                          {{ scope.row.sex === "0" ? "男" : "女" }}
                        </div>
                      </template> -->
                                        </el-table-column>
                                        <el-table-column prop="address" label="状态">
                                            <template #default="scope">
                                                <div>
                                                    {{
                                                        scope.row.status === "0"
                                                            ? "在职"
                                                            : "离职"
                                                    }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column fixed="right" label="操作" width="150">
                                            <template #default="scope">
                                                <el-button link type="primary" style="
                                                        color: rgba(
                                                            62,
                                                            95,
                                                            245,
                                                            1
                                                        );
                                                    " @click="
                                                        changeuser(scope.row)
                                                        ">详情
                                                </el-button>
                                                <el-button link type="primary" style="
                                                        color: rgba(
                                                            62,
                                                            95,
                                                            245,
                                                            1
                                                        );
                                                    " @click="
                                                        changeuserc(scope.row)
                                                        ">修改
                                                </el-button>
                                                <el-button link v-if="scope.row.status!=='0'" type="primary" style="
                                                        color: rgba(
                                                            234,
                                                            0,
                                                            0,
                                                            1
                                                        );
                                                    " @click="
                                                        removeuser(scope.row)
                                                        ">删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <div class="pagination">
                    <el-pagination
                      v-model:current-page="currentPage"
                      v-model:page-size="pageSize"
                      :page-sizes="[10, 30, 50]"
                      layout="total, sizes, prev, pager, next"
                      :total="total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    />
                  </div> -->
                                    <pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
                                        @SizeChange="handleSizeChange" @CurrentChange="handleCurrentChange">
                                    </pagination>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-tab-pane>
                <el-tab-pane class="el-tab-pane2" label="角色管理" name="second" v-if="globalProperties.roleflag === 2">
                    <div class="tab_t">
                        <el-card>
                            <el-button class="my_btn" @click="addrole" size="large" style="
                                    background-color: #3e5ff5;
                                    color: #ffffff;
                                ">
                                <el-icon style="color: #ffffff; margin-right: 5px">
                                    <Plus />
                                </el-icon>
                                新建角色
                            </el-button>
                        </el-card>
                    </div>
                    <div class="tab_b">
                        <el-card class="tab_b_l">
                            <div class="content tabs">
                                <div v-for="(ele, index) in rowslist" :key="index" @click="changetabs(index, ele)"
                                    :class="{
                                        tabs_item: true,
                                        active: tabs_itemflag == index
                                    }">
                                    {{ ele.roleName }}
                                </div>
                            </div>
                        </el-card>
                        <el-card class="tab_b_r">
                            <!-- 蒙层 -->
                            <!-- <div class="zzc" v-if="iptflag === true && !isadmin"></div> -->
                            <div class="content">
                                <div class="top">
                                    <el-form @submit.native.prevent :model="form" label-width="120px"
                                        style="margin-top: 20px">
                                        <el-form-item label="角色名称：">
                                            <el-input v-model="rolename" @keydown.enter.native="changeover
                                                " />
                                        </el-form-item>
                                    </el-form>
                                    <div class="icon-del-change">
                                        <!-- <img v-show="!isadmin" @click="change" src="../../assets/image/Form.png"
                                            alt="" />
                                        <span v-show="!isadmin" @click="change">{{
                                            isadmin ? "查看" : "修改"
                                            }}</span> -->
                                        <img v-show="!isadmin" @click="del" src="../../assets/image/DeleteOutlined.png"
                                            alt="" />
                                        <span v-show="!isadmin" @click="del">删除</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <el-form :model="changeform" label-width="120px">
                                        <!-- <el-form-item label="系统分配：">
                      <el-radio-group
                        v-model="form.resource"
                        :disabled="iptflag"
                      >
                        <el-radio label="仅自己" />
                        <el-radio label="所在组队数据" />
                      </el-radio-group>
                    </el-form-item> -->
                                        <el-form-item label="权限范围：">
                                            <el-radio-group v-model="changeform.allornone" @change="changeallornone">
                                                <el-radio label="全选" />
                                                <el-radio label="全不选" />
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="选择权限：">
                                            <el-tree ref="treeRef1" :data="treedata" show-checkbox node-key="id"
                                                highlight-current :props="defaultProps" />
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>
                            <div v-show="!isadmin" style="
                                    display: flex;
                                    align-items: center;
                                    margin-top: -30px;
                                    justify-content: center;
                                ">
                                <el-button class="my_cancelbtn" @click="jurisdictioncancle">取消</el-button>
                                <el-button type="primary" class="my_btn" @click="jurisdictionsure">确定</el-button>
                            </div>
                        </el-card>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 添加角色对话框 -->
        <el-dialog v-model="dialogVisible" title="新建角色" :width="isMobile ? '670' : '35%'">
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm1" :rules="rules1" label-width="120px" class="demo-ruleForm"
                    status-icon label-position="top">
                    <el-form-item label="名称" prop="rolename">
                        <el-input v-model="ruleForm1.rolename" maxlength="40" show-word-limit placeholder="请输入名称" />
                    </el-form-item>
                    <el-form-item label="角色排序" prop="num">
                        <el-input-number v-model="ruleForm1.num" :min="0" @change="numhandleChange" />
                    </el-form-item>
                    <el-form-item label="权限字符" prop="str">
                        <el-input v-model="ruleForm1.str" placeholder="请输入权限字符"
                            onkeyup="this.value=this.value.replace(/[^a-zA-Z_]/g,'')" />
                    </el-form-item>
                    <div>
                        <span style="color: red; margin-right: 5px">*</span>
                        <span>权限配置 </span>
                        <el-checkbox style="margin-left: 30px" label="全选/不全选" v-model="allornone"
                            @change="changestate"></el-checkbox>
                    </div>
                    <div style="height: 300px;overflow: auto;">
                        <el-tree ref="treeRef" :data="treedata" show-checkbox node-key="id" highlight-current
                            :props="defaultProps" />
                    </div>
                </el-form>
            </div>
            <template #footer>
                <div style="
                            display: flex;
                            justify-content: end;
                            padding-right: 50px;
                        ">
                    <el-button @click="resetForm">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 添加子组名称对话框 -->
        <el-dialog v-model="dialogFormVisible" title="添加子组" :width="isMobile ? '580' : '30%'"
            :close-on-click-modal="false">
            <el-form :model="form" ref="ruleFormRefaddchild" :rules="rulesaddchild" class="demo-ruleForm" status-icon>
                <el-form-item label="子组名称：" prop="name" label-width="100px">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="负责人：" prop="salename" label-width="100px">
                    <el-select v-model="form.salename" filterable placeholder="请选择">
                        <el-option v-for="item in nameoptions" :key="item.saleId" :label="item.saleName"
                            :value="item.saleId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门类型：" prop="bmlx" label-width="100px">
                    <el-select v-model="form.bmlx" filterable placeholder="请选择">
                        <el-option :key="1" label="商务" :value="1" />
                        <el-option :key="2" label="其他" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门排序：" prop="num" label-width="100px">
                    <el-input-number v-model="form.num" @change="handleChange1" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer" style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    ">
                    <el-button @click="addchildrencancel(ruleFormRefaddchild)">取消</el-button>
                    <el-button type="primary" @click="addchildrenok(ruleFormRefaddchild)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改子组名称对话框 -->
        <el-dialog v-model="dialogFormVisible1" title="修改子组名称" :width="isMobile ? '580' : '30%'">
            <el-form :model="form1">
                <el-form-item label="子组名称：" label-width="100px">
                    <el-input v-model="form1.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="负责人：" label-width="100px">
                    <el-select v-model="form1.salename" filterable placeholder="请选择">
                        <el-option v-for="item in nameoptions" :key="item.saleId" :label="item.saleName"
                            :value="item.saleId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门类型：" label-width="100px">
                    <el-select v-model="form1.bmlx" filterable placeholder="请选择">
                        <el-option :key="1" label="商务" :value="1" />
                        <el-option :key="2" label="其他" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门排序：" label-width="100px">
                    <el-input-number v-model="form1.num" @change="handleChange2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer" style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    ">
                    <el-button @click="changecancel">取消</el-button>
                    <el-button type="primary" @click="changeok">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加公司部门 -->
        <el-dialog v-model="dialogFormVisible2" title="添加公司部门" :width="isMobile ? '580' : '30%'">
            <el-form :model="form2">
                <el-form-item label="部门名称：" label-width="100px">
                    <el-input v-model="form2.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="负责人：" label-width="100px">
                    <el-select v-model="form2.salename" filterable placeholder="请选择">
                        <el-option v-for="item in nameoptions" :key="item.saleId" :label="item.saleName"
                            :value="item.saleId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门类型：" label-width="100px">
                    <el-select v-model="form2.bmlx" filterable placeholder="请选择">
                        <el-option :key="1" label="商务" :value="1" />
                        <el-option :key="2" label="其他" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门排序：" label-width="100px">
                    <el-input-number v-model="form2.num" @change="handleChange" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer" style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    ">
                    <el-button @click="adddeptcancel">取消</el-button>
                    <el-button type="primary" @click="adddeptok">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加组员对话框 -->
        <el-drawer v-model="drawer" title="新建员工" class="drawer" direction="rtl" :size="isMobile ? '100%' : '30%'">
            <div class="closeinnerdrawer" @click="addhide">
                <span>收</span><span>起</span><img src="../../assets/image/组355.png" alt="" />
            </div>
            <el-form ref="addruleFormRef" :model="addruleForm" :rules="addrules" label-width="120px"
                class="demo-ruleForm" status-icon label-position="top">
                <el-form-item label="名称" prop="salesId">
                    <!-- <el-select v-model="addruleForm.salesId" filterable placeholder="请选择" @change="changename">
                        <el-option v-for="item in nameoptionsByRole" :key="item.saleId"
                            :label="item.saleName + item.phone" :value="item.saleId" />
                    </el-select> -->
                    <el-input v-model="addruleForm.salesId" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="身份证号" prop="idCardNo">
                    <el-input v-model="addruleForm.idCardNo" placeholder="请输入身份证号" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="addruleForm.phone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="addruleForm.sex">
                        <el-radio label="0">男</el-radio>
                        <el-radio label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="入职时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="addruleForm.date1" type="date" label="Pick a date"
                                placeholder="选择日期" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col class="text-center" :span="2">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker v-model="addruleForm.date2" label="Pick a time" placeholder="选择时间"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col> -->
                </el-form-item>
                <el-form-item label="选择分组信息" prop="fzmsg">
                    <el-cascader v-model="addruleForm.fzmsg" :props="props" :options="addoptions">
                        <template #default="{ node, data }">
                            <span>{{ data.label }}</span>
                        </template>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="组员类型" prop="zytype">
                    <el-select v-model="addruleForm.zytype" placeholder="请选择组员类型">
                        <el-option v-for="item in zylxlist" :key="item.postId" :label="item.postName"
                            :value="item.postId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择角色信息" prop="role">
                    <el-select v-model="addruleForm.role" placeholder="请选择角色" @change="changeaddruleFormrole">
                        <el-option v-for="item in roleoptions" :disabled="globalProperties.roleflag === 1 &&
                            item.roleKey !== 'saas_sale_crew'
                            " :key="item.roleId" :label="item.roleName" :value="item.roleId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否参加排行榜" prop="isJoinRankingList">
                    <el-radio-group v-model="addruleForm.isJoinRankingList">
                        <el-radio label="0">参加</el-radio>
                        <el-radio label="1">不参加</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排行榜是否可见" prop="isShowRankingList">
                    <el-radio-group v-model="addruleForm.isShowRankingList">
                        <el-radio label="0">可见</el-radio>
                        <el-radio label="1">不可见</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="addresetForm(addruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="addsubmitForm(addruleFormRef)"
                        style="background-color: #0256ff">确定
                    </el-button>
                </div>
            </template>
        </el-drawer>
        <!-- 修改组员 -->
        <el-drawer v-model="drawerout" :with-header="false" class="drawer" :size="isMobile ? '100%' : '40%'">
            <div class="closedrawer" @click="hideout">
                <span>收</span><span>起</span><img src="../../assets/image/组355.png" alt="" />
            </div>
            <div class="top">
                <div class="top_l_img">
                    <img crossorigin="anonymous" :src="changeruleForm.img" />
                </div>
                <div class="top_c_msg">
                    <div class="name_sex">
                        <span style="
                                font-size: 18px;
                                font-weight: 700;
                                margin-right: 5px;
                            ">{{ changeruleForm.name }}</span>
                        <el-icon v-show="changeruleForm.sex === '0'" style="color: blue; margin-right: 5px">
                            <Male />
                        </el-icon>
                        <el-icon v-show="changeruleForm.sex === '1'" style="color: pink; margin-right: 5px">
                            <Female />
                        </el-icon>
                        <el-tag type="" v-show="changeruleForm.isjob === true" style="margin-right: 5px">在职</el-tag>
                        <el-tag type="danger" v-show="changeruleForm.isjob === false"
                            style="margin-right: 5px">离职</el-tag>
                    </div>
                    <div class="number_power">
                        <span class="number" style="
                                color: rgba(118, 118, 118, 1);
                                font-size: 14px;
                                margin-right: 5px;
                            ">{{ changeruleForm.phone }}</span>
                        <div style="
                                box-sizing: border-box;
                                padding: 5px;
                                font-size: 14px;
                            ">
                            {{ dept }}
                        </div>
                    </div>
                </div>
                <!-- <div class="r">
          <span style="color: rgba(2, 86, 255, 1); font-size: 14px; cursor: pointer" @click="openinnerDrawer">修改</span>
        </div> -->
            </div>
            <div class="fgline">工资记录</div>
            <span>月份：</span>
            <el-date-picker v-model="value2" type="month" placeholder="请选择月份" @change="changetime" />
            <el-table :data="tableData1" height="250" style="width: 100%; margin-top: 20px" :header-cell-style="{
                background: '#FAFAFC',
                color: '#202536'
            }">
                <el-table-column prop="name" label="产品" width="150">
                    <template #default="scope">
                        <span v-if="scope.row.productType === '0'">子弹发薪</span>
                        <span v-if="scope.row.productType === '1'">电子签</span>
                        <span v-if="scope.row.productType === '2'">日日保</span>
                        <span v-if="scope.row.productType === '3'">长期保</span>
                        <span v-if="scope.row.productType === '4'">发薪续费提成</span>
                        <span v-if="scope.row.productType === '5'">微保</span>
                    </template>
                </el-table-column>
                <el-table-column prop="royaltyRate" label="提成比例">
                    <!-- <template #default="scope">
            <div v-if="scope.row.productType === '0'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                  ? "暂无"
                  : scope.row.params.pay
              }}
            </div>
            <div v-if="scope.row.productType === '1'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                  ? "暂无"
                  : scope.row.params.ele
              }}
            </div>
            <div v-if="scope.row.productType === '2'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                  ? "暂无"
                  : scope.row.params.wesure
              }}
            </div>
            <div v-if="scope.row.productType === '3'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                  ? "暂无"
                  : scope.row.params.period
              }}
            </div>
            <div v-if="scope.row.productType === '5'">
              暂无
              {{ JSON.stringify(scope.row.params) == "{}"?'暂无':scope.row.params. }}
            </div>
          </template> -->
                </el-table-column>
                <el-table-column prop="address" label="业绩">
                    <template #default="scope">
                        <div v-if="scope.row.productType === '0'">
                            {{
                                JSON.stringify(scope.row.params) == "{}"
                                    ? "暂无"
                                    : scope.row.params.pay.firstAmount
                            }}
                        </div>
                        <div v-if="scope.row.productType === '1'">
                            {{
                                JSON.stringify(scope.row.params) == "{}"
                                    ? "暂无"
                                    : scope.row.params.ele.eleRechargeCount
                            }}
                        </div>
                        <div v-if="scope.row.productType === '2'">
                            {{
                                JSON.stringify(scope.row.params) == "{}"
                                    ? "暂无"
                                    : scope.row.params.wesure.amount
                            }}
                        </div>
                        <div v-if="scope.row.productType === '3'">
                            {{
                                JSON.stringify(scope.row.params) == "{}"
                                    ? "暂无"
                                    : scope.row.params.period.periodPremiumCount
                            }}
                        </div>
                        <div v-if="scope.row.productType === '4'">
                            {{
                                JSON.stringify(scope.row.params) == "{}"
                                    ? "暂无"
                                    : scope.row.params.pay.renewalAmount
                            }}
                        </div>
                        <div v-if="scope.row.productType === '5'">
                            暂无
                            <!-- {{ JSON.stringify(scope.row.params) == "{}"?'暂无':scope.row.params. }} -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="fgline">工作信息</div>
            <span>变更记录：</span>
            <el-select v-model="value" class="m-2" clearable placeholder="请选择变更信息" @change="changejobmsg">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <Timeline style="margin-left: 70px; margin-top: 20px" :data="orderData" />
            <div style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                <el-button type="primary" class="my_btn" style="background-color: #3e5ff5" @click="drawerout = false">确定
                </el-button>
            </div>
        </el-drawer>
        <!-- 弹出层内部的弹出层 -->
        <el-drawer :close-on-click-modal="false" v-model="editdrawer" title="修改组员信息" class="drawer" direction="rtl"
            :size="isMobile ? '100%' : '30%'" :append-to-body="true">
            <div class="closeinnerdrawer" @click="hide">
                <span>收</span><span>起</span><img src="../../assets/image/组355.png" alt="" />
            </div>
            <el-form ref="changeruleFormRef" :rules="isjobflagrole ? changerulesc : changerules" :model="changeruleForm"
                label-width="120px" class="demo-ruleForm" status-icon label-position="top">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="changeruleForm.name" placeholder="请输入名称" disabled />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="changeruleForm.phone" placeholder="请输入手机号" disabled />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="changeruleForm.sex">
                        <el-radio :label="'0'">男</el-radio>
                        <el-radio :label="'1'">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="入职时间" required>
                    <!--          <el-col :span="11">-->
                    <el-form-item prop="date1">
                        <el-date-picker v-model="changeruleForm.date1" format="YYYY/MM/DD" value-format="x" type="date"
                            label="Pick a date" placeholder="选择日期" />
                    </el-form-item>
                </el-form-item>
                <el-form-item label="选择分组信息" prop="fzmsg">
                    <el-cascader v-model="changeruleForm.fzmsg" :props="props" :options="addoptions">
                        <template #default="{ node, data }">
                            <span>{{ data.label }}</span>
                        </template>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="组员类型" prop="zytype">
                    <el-select v-model="changeruleForm.zytype" placeholder="请选择组员类型">
                        <el-option v-for="item in zylxlist" :key="item.postId" :label="item.postName"
                            :value="item.postId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择角色信息" prop="role">
                    <el-select @change="changeruleFormrole" v-model="changeruleForm.role" placeholder="请选择角色">
                        <el-option v-for="item in roleoptions" :disabled="globalProperties.roleflag === 1 &&
                            item.roleKey !== 'saas_sale_crew'
                            " :key="item.roleId" :label="item.roleName" :value="item.roleId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否参加排行榜" prop="isJoinRankingList">
                    <el-radio-group v-model="changeruleForm.isJoinRankingList">
                        <el-radio :value="0">参加</el-radio>
                        <el-radio :value="1">不参加</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排行榜是否可见" prop="isShowRankingList">
                    <el-radio-group v-model="changeruleForm.isShowRankingList">
                        <el-radio :value="0">可见</el-radio>
                        <el-radio :value="1">不可见</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否在职" prop="isjob">
                    <el-switch @change="changeisjob" v-model="changeruleForm.isjob" />
                </el-form-item>
                <el-form-item label="离职交接人员" prop="leavejobconnect"
                    v-if="!changeruleForm.isjob && changeruleForm.zytype !== 1">
                    <el-select filterable v-model="changeruleForm.leavejobconnect" placeholder="请选择离职交接人"
                        @change="changesales">
                        <el-option v-for="item in nameoptions" :key="item.saleId" :label="item.saleName"
                            :value="item.saleId" />
                    </el-select>
                </el-form-item>
                <div style="font-size: 14px" v-if="!changeruleForm.isjob && changeruleForm.zytype === 1">
                    <div style="margin-bottom: 11px">
                        待分配待客户<span class="blue">{{
                            lzkhfplist.length
                        }}</span>位：
                    </div>
                    <div class="blue" @click="plfptcopen" style="margin-left: 6px; cursor: pointer">
                        批量分配
                    </div>
                </div>
            </el-form>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="changeresetForm">取消</el-button>
                    <el-button type="primary" @click="changeusermsgsubmitForm(changeruleFormRef)"
                        style="background-color: #0256ff">确定
                    </el-button>
                </div>
            </template>
            <el-dialog v-model="plfptcagain" title="客户资源分配" @close="close" width="612">
                <div class="khzyfpbox">
                    <div class="top">
                        <el-button @click="fpkh">分配给其他成员</el-button>
                        <div>
                            共<span class="blue">{{ lzkhfplist.length }}位</span>客户
                        </div>
                    </div>
                    <el-table ref="multipleTableRef" :data="lzkhfplist" :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }" style="width: 100%; margin-top: 12px" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column property="companyName" label="客户资源名称" />
                        <el-table-column property="productTypeName" label="产品" />
                    </el-table>
                    <div style="margin-top: 24px">
                        已选中{{ ywarr.length }}位客户
                    </div>
                </div>
            </el-dialog>
            <el-dialog v-model="changesalertc" title="选择分配销售" width="500">
                <div class="changeoraddsalerbox">
                    <div class="lable">销售名称</div>
                    <div class="lablecontent">
                        <el-select v-model="changeaslervalue" filterable placeholder="请选择">
                            <el-option :disabled="disablesaleis === item.saleId" v-for="item in salerlist"
                                :key="item.saleId" :label="item.saleName" :value="item.saleId" />
                        </el-select>
                    </div>
                </div>
                <div class="flexcenterbox" style="margin-top: 16px">
                    <el-button class="my_btn" @click="changesalersure">确定</el-button>
                    <el-button class="my_cancelbtn" @click="changesalercancel">取消</el-button>
                </div>
            </el-dialog>
        </el-drawer>

        <el-dialog v-model="qdskzhsztc" title="渠道，收款账户设置" :width="isMobile ? '480' : '25%'">
            <div>
                <el-form :model="form" label-width="120px">
                    <el-form-item label="渠道选择：">
                        <el-select v-model="ditchvalue" class="m-2" placeholder="请选择渠道信息" @change="changeauditStatus"
                            clearable>
                            <el-option v-for="item in ditchoptions" :key="item.name" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收款账户选择：">
                        <el-select v-model="cpayadmin" placeholder="请选择收款账号" clearable>
                            <el-option v-for="item in payadminlist" :key="item.id" :label="item.bankName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">
                <div class="my_cancelbtn" @click="cancleset" style="
                        width: 60px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 10px;
                        text-align: center;
                        margin: 0 10px;
                    ">
                    取消
                </div>
                <div class="my_btn" @click="sureset" style="
                        width: 60px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 10px;
                        text-align: center;
                        margin: 0 10px;
                    ">
                    确定
                </div>
            </div>
        </el-dialog>
        <el-dialog v-model="dialogTableVisible" title="员工加入申请" :width="isMobile ? '620' : '25%'">
            <el-table :data="addjoberlist" height="500">
                <el-table-column property="salesName" label="姓名" width="100" />
                <el-table-column property="phone" label="手机号" width="200" />
                <el-table-column property="address" label="操作" width="130">
                    <template #default="scope">
                        <el-button link type="danger" size="small" @click.prevent="upadteJoin(scope.row, 2)">
                            驳回
                        </el-button>
                        <el-button link type="primary" size="small" @click.prevent="upadteJoin(scope.row, 1)">
                            通过
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import pagination from '../../components/pagination.vue'
import {
    ref,
    reactive,
    onMounted,
    nextTick,
    getCurrentInstance,
    onActivated
} from 'vue'
import type { TabsPaneContext, FormRules, FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElTree } from 'element-plus'
import Timeline from '../../components/timeline.vue'
import {
    getusermsginfoapi,
    getdepartmentapi,
    getrolesapi,
    getmenutreeapi,
    addroleapi,
    getrolesdetailapi,
    changeroleapi,
    delrolesapi,
    adddepartmentapi,
    deldepartmentapi,
    changedepartmentapi,
    getnewdepartmentapi,
    getcrmuserapi,
    adduserapi,
    getdepartmentuserapi,
    changeuserapi,
    removeuserapi,
    getperformanceapi,
    getjobmsgapi,
    getbmdetailapi,
    getproductbysaleapi,
    getallsellerapi,
    changedealallocateapi,
    getuserinfoapi,
    querySalesRole,
    getditchapi,
    getditchskadminapi,
    editCrmInfoApi,
    getAddUserListApi
} from '../../api/api'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { wait, dateFormat, shake } from '../../utils/utils'
import router from '../../router'

const isMobile = ref((window as any).isMobile)

const cancleset = () => {
    qdskzhsztc.value = false
}
const upadteJoin = async (row: any, status: number) => {
    const res = await editCrmInfoApi({
        id: row.id,
        auditStatus: status,
    })
    console.log(res)
    getAddUserList()
    if (status === 1) {
        drawer.value = true
        addruleForm.name = ''
        addruleForm.phone = ''
        addruleForm.sex = ''
        addruleForm.zytype = null
        addruleForm.date1 = ''
        addruleForm.date2 = ''
        addruleForm.role = ''
        addruleForm.fzmsg = []
        addruleForm.img = ''
        addruleForm.isShowRankingList = ''
        addruleForm.isJoinRankingList = ''
        addruleForm.roleKey = ''
        addruleForm.phone = row.phone
        addruleForm.name = row.salesName
        getnewdepartmentapi().then((res: any) => {
            console.log(res, 'shjgsgus')
            zylxlist.value = res
        })
    }
}
const toaddjobpop = async () => {
    getAddUserList()
    dialogTableVisible.value = true
}
const getAddUserList = async () => {
    const res: any = await getAddUserListApi({ pageSize: 999999, pageNum: 1, auditStatus: 0 })
    console.log(res)
    addjoberlist.value = res.rows
}
const addjoberlist = ref([] as any)
const dialogTableVisible = ref(false)
const cpayadmin = ref('')
const payadminlist = ref<any>([])
const ditchvalue = ref('')
const changeauditStatus = (e: any) => {
    ditchvalue.value = e
    cpayadmin.value = ''
    getditchskadminapi(ditchvalue.value, { noLoading: true }).then(
        (res: any) => {
            console.log(res, 1112)
            payadminlist.value = res.list
        }
    )
}

const sureset = () => {
    if (!ditchvalue.value) {
        ElMessage({
            message: '请选择渠道',
            type: 'warning'
        })
        return
    }
    if (!cpayadmin.value) {
        ElMessage({
            message: '请选择收款账户',
            type: 'warning'
        })
        return
    }
    changedepartmentapi({
        deptId: departlistid.value,
        parentId: parentIdset.value,
        deptName: teamname.value,
        orderNum: orderNumset.value,
        leader: leaderset.value,
        status: '0',
        type: 1,
        channelId: ditchvalue.value,
        receiptId: cpayadmin.value,
        isEditChannel: 1
    }).then((res) => {
        console.log(res)
        cancleset()
        getdepartment()
        changecancel()
    })
}
const qdskzhsztc = ref(false)

const editdeptskzhtcopen = () => {
    console.log(111)
    qdskzhsztc.value = true
}
const {
    appContext: {
        app: {
            config: { globalProperties }
        }
    }
} = getCurrentInstance()
const rulesaddchild = reactive<any>({
    name: [{ required: true, message: '请输入子组名称', trigger: 'blur' }],
    num: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
    salename: [
        {
            required: true,
            message: '请选择负责人',
            trigger: 'change'
        }
    ],
    bmlx: [
        {
            required: true,
            message: '请选择部门类型',
            trigger: 'change'
        }
    ]
})
const close = () => {
    console.log(111)
    changeusermsgsubmitForm(changeruleFormRef.value)
}
const ruleFormRefaddchild = ref<any>(null)
const zzid = ref<any>(null)

const getditch = () => {
    getditchapi().then((res: any) => {
        console.log(res, 'aaaaaaaa')
        ditchoptions.value = res
    })
}
const ditchoptions = ref<any>([])
onActivated(() => {
    getdepartmentapi().then((resc: any) => {
        console.log(resc, '获取部门树')
        dataSource.value = resc
        addoptions.value = resc
        const id = resc[0].id
        zzid.value = id
        if (globalProperties.roleflag === 2) {
            getdepartmentuserapi({
                searchText: input3.value,
                pageNum: currentPage.value,
                pageSize: pageSize.value
            }).then((res: any) => {
                console.log(res)
                if (res.rows) {
                    res.rows.forEach((ele: any, i: any) => {
                        ele.entryTime = new Date(
                            ele.entryTime
                        ).toLocaleDateString()
                    })
                }
                depuser.value = res.rows
                total.value = res.total
            })
        } else {
            getuserinfoapi().then((res: any) => {
                sessionStorage.setItem('userid', res.user.userId)
                sessionStorage.setItem('img', res.user.avatar)
                sessionStorage.setItem('name', res.user.nickName)
                sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
                sessionStorage.setItem('isSupPcAdmin', res.user.isSupPcAdmin)
                teamname.value = res.user.dept.deptName
                getdepartmentuserapi({
                    searchText: input3.value,
                    pageNum: currentPage.value,
                    pageSize: pageSize.value,
                    deptId: res.user.deptId
                }).then((res: any) => {
                    console.log(res)
                    if (res.rows) {
                        res.rows.forEach((ele: any, i: any) => {
                            ele.entryTime = new Date(
                                ele.entryTime
                            ).toLocaleDateString()
                        })
                    }
                    depuser.value = res.rows
                    total.value = res.total
                })
            })
        }
    })
    querySalesRole({}).then((res) => {
        console.log(res, 'gfshghuds')
        nameoptionsByRole.value = res
    })
    //
    getcrmuserapi(1).then((res) => {
        console.log(res, '123134124')
        nameoptions.value = res
    })
    getrolesapi().then((res: any) => {
        console.log(res, '909090')
        roleoptions.value = res.rows
    })
    getditch()
})
const zylxlist = ref<any>([])
const fpkh = () => {
    getallsellerapi().then((res: any) => {
        console.log(res, '销售')
        salerlist.value = res
    })
    if (ywarr.value.length === 0) {
        ElMessage({
            message: '请选择要分配的客户',
            type: 'warning'
        })
        return
    }
    changesalertc.value = true
    changeaslervalue.value = null
}
const changesalercancel = () => {
    changesalertc.value = false
    changeaslervalue.value = null
}
const changesalersure = () => {
    const y = new Date().getFullYear()
    const m =
        new Date().getMonth() + 1 >= 10
            ? new Date().getMonth() + 1
            : +new Date().getMonth() + 1
    if (changeaslervalue.value === null || '') {
        ElMessage({
            message: '请选择销售',
            type: 'warning'
        })
        return
    }
    const arr: any = []
    ywarr.value.forEach((ele: any, index: any) => {
        arr.push(ele.companyId)
    })
    changedealallocateapi({
        saleId: changeaslervalue.value,
        saleOldId: disablesaleis.value,
        companyIds: arr,
        serviceStartTime: `${y}-${m >= 10 ? m : '0' + m}-01`
    }).then((res: any) => {
        console.log(res)
        if (res.code === 200) {
            ElMessage({
                message: '修改成功',
                type: 'success'
            })
            changeaslervalue.value = null
            changesalertc.value = false
            getproductbysale(disablesaleis.value)
        }
    })
}
const handleSelectionChange = (val: any) => {
    console.log(val)
    ywarr.value = val
}
const salerlist = ref<any>([])
const changeaslervalue = ref<any>(null)
const changesalertc = ref(false)
const ywarr = ref([])
const plfptcagain = ref(false)
const plfptcopen = () => {
    plfptcagain.value = true
}
const changeisjob = (val: any) => {
    console.log(val)
    if (val === false) {
        isjobflagrole.value = true
    } else {
        isjobflagrole.value = false
    }
}
const toDepartingmembers = () => {
    router.push({ path: '/Departingmembers' })
}
const isjobflagrole = ref(false)
const searchall = () => {
    teamname.value = '全部组员列表'
    depttype.value = null
    getdepartmentuserapi({
        searchText: input3.value,
        pageNum: currentPage.value,
        pageSize: pageSize.value
    }).then((res: any) => {
        console.log(res)
        if (res.rows) {
            res.rows.forEach((ele: any, i: any) => {
                ele.entryTime = new Date(ele.entryTime).toLocaleDateString()
            })
        }
        depuser.value = res.rows
        total.value = res.total
    })
}
const searchnameanddept = (val: any) => {
    if (departlistid.value) {
        shake(getdepartmentuser, 1000)
    } else {
        shake(cgetdepartmentuser, 1000)
    }
}
const cgetdepartmentuser = () => {
    getdepartmentuserapi({
        searchText: input3.value,
        pageNum: currentPage.value,
        pageSize: pageSize.value
    }).then((res: any) => {
        console.log(res)
        if (res.rows) {
            res.rows.forEach((ele: any, i: any) => {
                ele.entryTime = new Date(ele.entryTime).toLocaleDateString()
            })
        }
        depuser.value = res.rows
        total.value = res.total
    })
}
const changejobmsg = (val: any) => {
    // console.log(val);
    getjobmsgapi({
        userId: changeruleForm.userid,
        type: val
    }).then((res) => {
        console.log(res)
        orderData.value = res.data
    })
}
const changetime = (val: any) => {
    const mounth =
        val.getMonth() + 1 >= 10 ? val.getMonth() + 1 : `0${val.getMonth() + 1}`
    const day = new Date(val.getFullYear(), val.getMonth() + 1, 0).getDate()
    getperformanceapi({
        userId: changeruleForm.userid,
        startTime: `${val.getFullYear()}-${mounth}-01`,
        endTime: `${val.getFullYear()}-${mounth}-${day}`
    }).then((res: any) => {
        console.log(res)
        tableData1.value = res
    })
}
const changerules = reactive<FormRules>({
    fzmsg: [
        {
            required: true,
            message: '请选择分组',
            trigger: 'change'
        }
    ],
    role: [
        {
            required: true,
            message: '请选择角色',
            trigger: 'change'
        }
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
        }
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
        }
    ],
    zytype: [
        {
            required: true,
            message: '请选择组员类型',
            trigger: 'change'
        }
    ],
    isShowRankingList: [
        {
            required: true,
            message: '请选择是否加入排行榜',
            trigger: 'change'
        }
    ],
    isJoinRankingList: [
        {
            required: true,
            message: '请选择是否可见排行榜',
            trigger: 'change'
        }
    ],
    sex: [
        {
            required: true,
            message: '请选择性别',
            trigger: 'change'
        }
    ]
})
const changerulesc = reactive<FormRules>({
    fzmsg: [
        {
            required: true,
            message: '请选择分组',
            trigger: 'change'
        }
    ],
    isShowRankingList: [
        {
            required: true,
            message: '请选择是否加入排行榜',
            trigger: 'change'
        }
    ],
    isJoinRankingList: [
        {
            required: true,
            message: '请选择是否可见排行榜',
            trigger: 'change'
        }
    ],
    role: [
        {
            required: true,
            message: '请选择角色',
            trigger: 'change'
        }
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
        }
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
        }
    ],
    zytype: [
        {
            required: true,
            message: '请选择组员类型',
            trigger: 'change'
        }
    ],
    sex: [
        {
            required: true,
            message: '请选择性别',
            trigger: 'change'
        }
    ],
    leavejobconnect: [
        {
            required: true,
            message: '请选择离职交接人',
            trigger: 'change'
        }
    ]
})
const changeusermsgsubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            console.log(changeruleForm)
            const timeymd = dateFormat(
                'YYYY-mm-dd',
                new Date(changeruleForm.date1)
            )
            const timehfs = dateFormat(
                'HH:MM:SS',
                new Date(changeruleForm.date2)
            )
            changeuserapi({
                userId: changeruleForm.userid,
                deptId: changeruleForm.fzmsg[changeruleForm.fzmsg.length - 1],
                userName: changeruleForm.phone,
                nickName: changeruleForm.name,
                phonenumber: changeruleForm.phone,
                sex: changeruleForm.sex,
                auditStatus: changeruleForm.isjob ? 1 : 2,
                avatar: changeruleForm.img,
                postIds: [changeruleForm.zytype],
                roleIds: [changeruleForm.role],
                isJoinRankingList: changeruleForm.isJoinRankingList,
                isShowRankingList: changeruleForm.isShowRankingList,
                crmAuditStatus: changeruleForm.isjob ? 1 : 2,
                roleKey: changeruleForm.roleKey,
                receiverSales:
                    !changeruleForm.isjob && changeruleForm.zytype === 1
                        ? '{}'
                        : JSON.stringify(
                            changeruleForm.isjob
                                ? {}
                                : {
                                    id: changeruleForm.leavejobconnect,
                                    salesName: changeruleForm.salesName
                                }
                        ),
                entryTime: new Date(timeymd + ' ' + timehfs).getTime()
            }).then((res: any) => {
                console.log(res)
                if (res.code === 200) {
                    ElMessage({
                        message: '修改成功',
                        type: 'success'
                    })
                }
                if (globalProperties.roleflag === 2) {
                    teamname.value = '全部组员列表'
                }
                getdepartmentuser()
                editdrawer.value = false
                drawerout.value = false
                changeusermsgresetForm(changeruleFormRef.value)
                getuserinfoapi().then((res: any) => {
                    sessionStorage.setItem('userid', res.user.userId)
                    sessionStorage.setItem('img', res.user.avatar)
                    sessionStorage.setItem('name', res.user.nickName)
                    sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
                    sessionStorage.setItem(
                        'isSupPcAdmin',
                        res.user.isSupPcAdmin
                    )
                    if (res.user.isSupPcAdmin === 1) {
                        globalProperties.roleflag = 2
                    } else if (res.user.isGrpLead === 1) {
                        globalProperties.roleflag = 1
                    }
                    console.log(111, globalProperties)
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const changeusermsgresetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const changeruleFormRef = ref<FormInstance>()
const drawerout = ref(false)
const openinnerDrawer = () => {
    editdrawer.value = true
}
const hideout = () => {
    tableData1.value = []
    value.value = ''
    drawerout.value = false
}
const options1 = [
    {
        value: '0',
        label: '新增'
    },
    {
        value: '1',
        label: '划出'
    },
    {
        value: '2',
        label: '离职'
    }
]
const tableData1 = ref([])
const value = ref('')
const value2 = ref('')
const orderData = ref([])
const changeresetForm = () => {
    changeusermsgresetForm(changeruleFormRef.value)
    editdrawer.value = false
}
const changesales = (val: any) => {
    nameoptions.value.forEach((ele: any, index: any) => {
        if (ele.id === val) {
            changeruleForm.saleName = ele.saleName
        }
    })
}
const changeruleForm = reactive<any>({
    userid: '',
    leavejobconnect: '',
    salesName: '',
    isjob: false,
    role: 0,
    zytype: null,
    fzmsg: [],
    date2: new Date(),
    date1: new Date(),
    sex: '',
    phone: '',
    name: '',
    img: '',
    isShowRankingList: '',
    isJoinRankingList: '',
    roleKey: ''
})
const getproductbysale = (id: any) => {
    getproductbysaleapi(id).then((res: any) => {
        console.log(res, 'resresres')
        lzkhfplist.value = res
    })
}
const lzkhfplist = ref<any>([])
const editdrawer = ref(false)
const changeuser = (val: any) => {
    console.log(val)
    value.value = ''
    changeusermsgresetForm(changeruleFormRef.value)
    const mounth =
        new Date().getMonth() + 1 >= 10
            ? new Date().getMonth() + 1
            : `0${new Date().getMonth() + 1}`
    const day = new Date(
        new Date().getFullYear(),
        new Date().getMonth() + 1,
        0
    ).getDate()
    getperformanceapi({
        userId: val.userId,
        startTime: `${new Date().getFullYear()}-${mounth}-01`,
        endTime: `${new Date().getFullYear()}-${mounth}-${day}`
    }).then((res: any) => {
        tableData1.value = res
    })
    disablesaleis.value = val.saasUserId
    getproductbysale(val.saasUserId)
    getjobmsgapi({ userId: val.userId, type: value.value }).then((res) => {
        console.log(res)
        orderData.value = res.data
    })
    getusermsginfoapi(val.userId).then((res: any) => {
        console.log(res, 'info')
        changeruleForm.role = res.roles[0].roleId
        changeruleForm.fzmsg = res.deptIds
        changeruleForm.zytype = res.postId
        changeruleForm.date1 = res.entryTime
    })
    value2.value = new Date().toString()
    dept.value = val.dept.deptName
    changeruleForm.name = val.nickName
    changeruleForm.userid = val.userId
    changeruleForm.phone = val.phonenumber
    changeruleForm.sex = val.sex
    changeruleForm.isjob = val.status === '0' ? true : false
    isjobflagrole.value = changeruleForm.isjob ? false : true
    changeruleForm.img = val.avatar
    drawerout.value = true
}
const changeuserc = (val: any) => {
    getnewdepartmentapi().then((res: any) => {
        console.log(res, 'shjgsgus')
        zylxlist.value = res
    })
    console.log(val, 'uyfhsuihgsuhi')
    value.value = ''
    changeusermsgresetForm(changeruleFormRef.value)
    disablesaleis.value = val.saasUserId
    getproductbysale(val.saasUserId)
    getusermsginfoapi(val.userId).then((res: any) => {
        console.log(res, 'info')
        changeruleForm.role = res.roles[0].roleId
        changeruleForm.fzmsg = res.deptIds
        changeruleForm.zytype = res.postId
        changeruleForm.date1 = res.entryTime
        changeruleForm.isShowRankingList = res.isShowRankingList
        changeruleForm.isJoinRankingList = res.isJoinRankingList
        changeruleForm.roleKey = res.roleKey
    })
    value2.value = new Date().toString()
    dept.value = val.dept.deptName
    changeruleForm.name = val.nickName
    changeruleForm.userid = val.userId
    changeruleForm.phone = val.phonenumber
    changeruleForm.sex = val.sex
    changeruleForm.isjob = val.status === '0' ? true : false
    isjobflagrole.value = changeruleForm.isjob ? false : true
    changeruleForm.img = val.avatar
    editdrawer.value = true
}
const disablesaleis = ref<any>(null)
const dept = ref('')
// 移除用户所属部门
const removeuser = (val: any) => {
    console.log(val)
    ElMessageBox.confirm('确定将用户移除部门吗？', '移除部门', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            removeuserapi({ userId: val.userId }).then((res) => {
                getdepartmentuser()
                ElMessage({
                    type: 'success',
                    message: '移除部门成功'
                })
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消移除'
            })
        })
}
const teamname = ref('全部组员列表')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const handleCurrentChange = (val: any) => {
    currentPage.value = val
    getdepartmentuser()
}
const handleSizeChange = (val: any) => {
    pageSize.value = val
    getdepartmentuser()
}
const getdepartmentuser = () => {
    // console.log(departlistid.value);
    if (globalProperties.roleflag === 2) {
        getdepartmentuserapi({
            searchText: input3.value,
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            deptId: departlistid.value ? departlistid.value : ''
        }).then((res: any) => {
            console.log(res)
            if (res.rows) {
                res.rows.forEach((ele: any, i: any) => {
                    ele.entryTime = new Date(
                        ele.entryTime
                    ).toLocaleDateString()
                })
            }
            depuser.value = res.rows
            total.value = res.total
        })
    } else {
        getuserinfoapi().then((res: any) => {
            sessionStorage.setItem('userid', res.user.userId)
            sessionStorage.setItem('img', res.user.avatar)
            sessionStorage.setItem('name', res.user.nickName)
            sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
            sessionStorage.setItem('isSupPcAdmin', res.user.isSupPcAdmin)
            teamname.value = res.user.dept.deptName
            getdepartmentuserapi({
                searchText: input3.value,
                pageNum: currentPage.value,
                pageSize: pageSize.value,
                deptId: res.user.deptId
            }).then((res: any) => {
                console.log(res)
                if (res.rows) {
                    res.rows.forEach((ele: any, i: any) => {
                        ele.entryTime = new Date(
                            ele.entryTime
                        ).toLocaleDateString()
                    })
                }
                depuser.value = res.rows
                total.value = res.total
            })
        })
    }
}
const changename = (val: any) => {
    console.log(val)
    var index = nameoptionsByRole.value.findIndex((ele: any, index: any) => {
        return val === ele.saleId
    })
    addruleForm.phone = nameoptionsByRole.value[index].phone
    addruleForm.sex = nameoptionsByRole.value[index].sex
    addruleForm.img = nameoptionsByRole.value[index].salesHeadUrl
    addruleForm.name = nameoptionsByRole.value[index].saleName
}
// const salesId = ref()
const nameoptions = ref<any>([])
const nameoptionsByRole = ref<any>([])
const roleoptions = ref<any>([])
const addruleFormRef = ref<FormInstance>()
const changeaddruleFormrole = (val: any) => {
    console.log(val, roleoptions.value)
    roleoptions.value.forEach((ele: any, index: any) => {
        if (ele.roleId === val) {
            addruleForm.roleKey = ele.roleKey
        }
    })
}
const changeruleFormrole = (val: any) => {
    roleoptions.value.forEach((ele: any, index: any) => {
        if (ele.roleId === val) {
            changeruleForm.roleKey = ele.roleKey
        }
    })
}
const addruleForm = reactive<any>({
    idCardNo: '',
    salesId: '',
    name: '',
    phone: '',
    sex: '',
    zytype: null,
    date1: '',
    date2: '',
    role: '',
    fzmsg: [],
    img: '',
    isShowRankingList: '',
    isJoinRankingList: '',
    roleKey: ''
})
const addoptions = ref<any>([])
const props = {
    expandTrigger: 'hover' as const,
    label: 'label',
    value: 'id'
}
const addrules = reactive<FormRules>({
    salesId: [
        {
            required: true,
            message: '请输入',
            trigger: 'change'
        }
    ],
    idCardNo: [
        {
            required: true,
            message: '请输入',
            trigger: 'change'
        }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '手机号格式不对',
            trigger: 'blur'
        }
    ],
    fzmsg: [
        {
            required: true,
            message: '请选择分组',
            trigger: 'change'
        }
    ],
    role: [
        {
            required: true,
            message: '请选择角色',
            trigger: 'change'
        }
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
        }
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
        }
    ],
    sex: [
        {
            required: true,
            message: '请选择性别',
            trigger: 'change'
        }
    ],
    isShowRankingList: [
        {
            required: true,
            message: '请选择是否加入排行榜',
            trigger: 'change'
        }
    ],
    isJoinRankingList: [
        {
            required: true,
            message: '请选择是否可见排行榜',
            trigger: 'change'
        }
    ],
    zytype: [
        {
            required: true,
            message: '请选择组员类型',
            trigger: 'change'
        }
    ]
})
// 确定添加成员
const addsubmitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(addruleForm)
            const timeymd = dateFormat(
                'YYYY-mm-dd',
                new Date(addruleForm.date1)
            )
            // const timehfs = dateFormat('HH:MM:SS', new Date(addruleForm.date2))
            adduserapi({
                idCardNo: addruleForm.idCardNo,
                salesName: addruleForm.salesId,
                deptId: addruleForm.fzmsg[addruleForm.fzmsg.length - 1],
                userName: addruleForm.phone,
                nickName: addruleForm.salesId,
                password: 'lthd@2021.03',
                phonenumber: addruleForm.phone,
                isJoinRankingList: addruleForm.isJoinRankingList,
                isShowRankingList: addruleForm.isShowRankingList,
                crmAuditStatus: 1,
                roleKey: addruleForm.roleKey,
                sex: addruleForm.sex,
                avatar: addruleForm.img,
                postIds: [addruleForm.zytype],
                roleIds: [addruleForm.role],
                entryTime: new Date(timeymd).getTime()
            }).then((res) => {
                console.log(res)
                drawer.value = false
                addresetForm(addruleFormRef.value)
                if (globalProperties.roleflag === 2) {
                    getdepartmentuserapi({
                        searchText: input3.value,
                        pageNum: currentPage.value,
                        pageSize: pageSize.value
                    }).then((res: any) => {
                        console.log(res)
                        if (res.rows) {
                            res.rows.forEach((ele: any, i: any) => {
                                ele.entryTime = new Date(
                                    ele.entryTime
                                ).toLocaleDateString()
                            })
                        }
                        depuser.value = res.rows
                        total.value = res.total
                    })
                } else {
                    getuserinfoapi().then((res: any) => {
                        sessionStorage.setItem('userid', res.user.userId)
                        sessionStorage.setItem('img', res.user.avatar)
                        sessionStorage.setItem('name', res.user.nickName)
                        sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
                        sessionStorage.setItem('isSupPcAdmin', res.user.isSupPcAdmin)
                        teamname.value = res.user.dept.deptName
                        getdepartmentuserapi({
                            searchText: input3.value,
                            pageNum: currentPage.value,
                            pageSize: pageSize.value,
                            deptId: res.user.deptId
                        }).then((res: any) => {
                            console.log(res)
                            if (res.rows) {
                                res.rows.forEach((ele: any, i: any) => {
                                    ele.entryTime = new Date(
                                        ele.entryTime
                                    ).toLocaleDateString()
                                })
                            }
                            depuser.value = res.rows
                            total.value = res.total
                        })
                    })
                }
                // getdepartmentuserapi({
                //     searchText: input3.value,
                //     pageNum: currentPage.value,
                //     pageSize: pageSize.value
                // }).then((res: any) => {
                //     console.log(res)
                //     if (res.code === 200) {
                //         ElMessage({
                //             message: '添加成功',
                //             type: 'success'
                //         })
                //     }
                //     if (res.rows) {
                //         res.rows.forEach((ele: any, i: any) => {
                //             ele.entryTime = new Date(
                //                 ele.entryTime
                //             ).toLocaleDateString()
                //         })
                //     }
                //     depuser.value = res.rows
                //     total.value = res.total
                // })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const addresetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    drawer.value = false
}
const drawer = ref(false)
const hide = () => {
    editdrawer.value = false
}
const parentId = ref(0)
const changeok = () => {
    changedepartmentapi({
        deptId: deptid.value,
        parentId: parentId.value,
        deptName: form1.name,
        orderNum: form1.num,
        leader: form1.salename,
        status: '0',
        type: form1.bmlx,
        isEditChannel: 0
    }).then((res) => {
        console.log(res)
        getdepartment()
        changecancel()
        window.location.reload()
    })
}
const changecancel = () => {
    form1.name = ''
    form1.num = 1
    dialogFormVisible1.value = false
}
const addchildrenok = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            adddepartmentapi({
                parentId: deptid.value,
                deptName: form.name,
                orderNum: form.num,
                leader: form.salename,
                type: form.bmlx,
                status: '0'
            }).then((res) => {
                // console.log(res);
                getdepartment()
                addchildrencancel(ruleFormRefaddchild.value)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const addchildrencancel = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogFormVisible.value = false
}

const addchildrencancelc = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 确定添加部门
const adddeptok = () => {
    adddepartmentapi({
        parentId: 100,
        deptName: form2.name,
        orderNum: form2.num,
        leader: form2.salename,
        status: '0',
        type: form2.bmlx
    }).then((res) => {
        // console.log(res);
        getdepartment()
        adddeptcancel()
    })
}
// 取消添加部门
const adddeptcancel = () => {
    form2.name = ''
    form2.num = 1
    dialogFormVisible2.value = false
}
const handleChange = (value: any) => {
    // console.log(value)
    form2.num = value
}
const handleChange1 = (value: any) => {
    // console.log(value)
    form.num = value
}
const handleChange2 = (value: any) => {
    // console.log(value)
    form1.num = value
}
// 表单数据
const form = reactive<any>({
    name: '',
    num: 1,
    salename: null,
    bmlx: null
})
const form1 = reactive<any>({
    name: '',
    num: 1,
    salename: null,
    bmlx: null
})
const form2 = reactive<any>({
    name: '',
    num: 1,
    salename: null,
    bmlx: null
})
const form3 = reactive({
    name: '',
    region: ''
})
const departlistid = ref()
const depttype = ref(null)
const orderNumset = ref('')
const leaderset = ref('')
const parentIdset = ref('')
const clicktree = (son: any, father: any) => {
    ditchvalue.value = ''
    cpayadmin.value = ''
    teamname.value = father.data.label
    departlistid.value = father.data.id
    getbmdetailapi(departlistid.value).then((res: any) => {
        console.log(res, 'resresres')
        depttype.value = res.type
        parentIdset.value = res.parentId
        orderNumset.value = res.orderNum
        leaderset.value = res.leader
        if (res.channelId) {
            ditchvalue.value = res.channelId
            getditchskadminapi(ditchvalue.value, { noLoading: true }).then(
                (resc: any) => {
                    payadminlist.value = resc.list
                    cpayadmin.value = res.receiptId
                }
            )
        }
    })
    getdepartmentuserapi({
        searchText: input3.value,
        deptId: departlistid.value,
        pageNum: currentPage.value,
        pageSize: pageSize.value
    }).then((res: any) => {
        console.log(res)
        if (res.rows) {
            res.rows.forEach((ele: any, i: any) => {
                ele.entryTime = new Date(ele.entryTime).toLocaleDateString()
            })
        }
        depuser.value = res.rows
        total.value = res.total
    })
    if (father.parent.data.id == undefined) {
        parentId.value = 100
    } else {
        parentId.value = father.parent.data.id
    }
}
const addhide = () => {
    drawer.value = false
}
// addstaff 新建员工
const addstaff = () => {
    drawer.value = true
    addruleForm.name = ''
    addruleForm.phone = ''
    addruleForm.sex = ''
    addruleForm.zytype = null
    addruleForm.date1 = ''
    addruleForm.date2 = ''
    addruleForm.role = ''
    addruleForm.fzmsg = []
    addruleForm.img = ''
    addruleForm.isShowRankingList = ''
    addruleForm.isJoinRankingList = ''
    addruleForm.roleKey = ''
    getnewdepartmentapi().then((res: any) => {
        console.log(res, 'shjgsgus')
        zylxlist.value = res
    })
}
const adddepartment = () => {
    console.log('添加部门')
    dialogFormVisible2.value = true
}
// 修改部门名称
const changedepartmentname = (node: Node, data: Tree) => {
    dialogFormVisible1.value = true
    console.log(node)
    deptid.value = data.id
    getbmdetailapi(data.id).then((res: any) => {
        console.log(res, 'resresres')
        form1.name = res.deptName
        form1.num = Number(res.orderNum)
        form1.salename = Number(res.leader)
        form1.bmlx = Number(res.type)
    })
}
const deptid = ref(0)
// 添加员工分支
const append = (data: Tree) => {
    dialogFormVisible.value = true
    console.log(data.id)
    deptid.value = data.id
    addchildrencancelc(ruleFormRefaddchild.value)
}
const deltotal = ref(0)
// 删除员工分支
const remove = (node: Node, data: Tree) => {
    // console.log(data.id);
    getdepartmentuserapi({
        searchText: input3.value,
        deptId: data.id,
        pageNum: currentPage.value,
        pageSize: pageSize.value
    }).then((res: any) => {
        // console.log(res.total);
        deltotal.value = res.total
        ElMessageBox.confirm(
            '该组有' +
            deltotal.value +
            '名成员，删除分组后，将自动归为上级成员，是否确认删除么？',
            '删除提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )
            .then(() => {
                deldepartmentapi(data.id).then((res) => {
                    console.log(res)
                    ElMessage({
                        type: 'success',
                        message: '删除成功'
                    })
                    getdepartment()
                })
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除'
                })
            })
    })
}
const numhandleChange = (value: any) => {
    ruleForm1.num = value
}
const changestate = () => {
    if (allornone.value === false) {
        setCheckedKeys([])
    } else {
        setCheckedKeys(allpower.value)
    }
}
const allornone = ref(false)
const setCheckedKeys1 = (arr: any) => {
    const parentKeys: any = []
    getParentKeys(treedata.value, parentKeys)
    const sonKeys: any = []
    arr.forEach((i: number) => {
        if (parentKeys.every((k: number) => k !== i)) {
            sonKeys.push(i)
        }
    })
    setTimeout(() => {
        treeRef1.value!.setCheckedKeys(sonKeys)
    }, 0)
}
const setCheckedKeys = (arr: any) => {
    treeRef.value!.setCheckedKeys(arr, false)
}
// 获取部门树
const getdepartment = () => {
    getdepartmentapi().then((res: any) => {
        console.log(res, '获取部门树')
        dataSource.value = res
        addoptions.value = res
    })
}
const getParentKeys = (list: any, keys: []) => {
    list.forEach((i: any) => {
        if (i.children?.length) {
            keys.push(i.id)
            getParentKeys(i.children, keys)
        }
    })
}
const getmenutree = (roleId: any) => {
    getmenutreeapi(roleId).then((res: any) => {
        console.log(res)
        treedata.value = res.menus
        checkedKeys.value = res.checkedKeys
        setCheckedKeys1(checkedKeys.value)
    })
}
const rowslist = ref<any>([])
const userolenum = ref(0)
// 查询角色
const getroles = () => {
    getrolesapi().then((res: any) => {
        // console.log(res);
        roleoptions.value = res.rows
        rowslist.value = res.rows
        roleid.value = res.rows[0].roleId
        rolename.value = res.rows[0].roleName
        const index = res.rows.findIndex((ele: any) => {
            return ele.roleKey === 'saas_operation_role'
        })
        croleid.value = res.rows[index].roleId
    })
}
const croleid = ref(0)
const getallpower = () => {
    getmenutreeapi(croleid.value).then((res: any) => {
        // console.log(res);
        allpower.value = res.checkedKeys
    })
}
const allpower = ref([])
const roleid = ref(0)
// 分配权限取消按钮
const jurisdictioncancle = async () => {
    iptflag.value = true
    tabs_itemflag.value = 0
    getroles()
    await wait(200)
    getmenutree(roleid.value)
    getrolesdetail(roleid.value)
}
// 分配权限确定按钮
const jurisdictionsure = () => {
    const arr = treeRef1.value!.getCheckedKeys()
    const arr2 = treeRef1.value!.getHalfCheckedKeys()
    const resultArr = [...arr, ...arr2]
    changeroleapi({
        roleName: rolename.value,
        roleKey: changeroleKey.value,
        roleSort: changeroleSort.value,
        status: changestatus.value,
        roleId: changeroleId.value,
        menuIds: resultArr
    }).then((res) => {
        console.log(res)
        tabs_itemflag.value = 0
        getroles()
        wait(200)
        getmenutree(roleid.value)
        getrolesdetail(roleid.value)
    })
    iptflag.value = true
}
const tabs_itemflag = ref(0)
const iptflag = ref(true)
const change = () => {
    iptflag.value = false
}
const isadmin = ref(false)
const changetabs = (i: number, ele: any) => {
    console.log(ele, 'elelelelelelel')
    if (ele.roleId === 110) {
        console.log(999)
        isadmin.value = true
    } else {
        isadmin.value = false
    }
    userolenum.value = ele.peopleCount
    iptflag.value = true
    getmenutree(ele.roleId)
    rolename.value = ele.roleName
    tabs_itemflag.value = i
    getrolesdetail(ele.roleId)
}
const changeroleKey = ref('')
const changestatus = ref('')
const changeroleSort = ref('')
const changeroleId = ref(0)
const getrolesdetail = (roleid: number | string) => {
    getrolesdetailapi(roleid).then((res: any) => {
        console.log(res)
        changeroleId.value = res.roleId
        changeroleKey.value = res.roleKey
        changeroleSort.value = res.roleSort
        changestatus.value = res.status
    })
}
const powerflag = ref(false)
// 对话框是否开启的标识
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const dialogFormVisible2 = ref(false)
// 删除角色
const del = () => {
    iptflag.value = false
    // console.log("del");
    ElMessageBox.confirm(
        '该角色有' +
        userolenum.value +
        '名成员，删除角色后，功能权限自动降级为无，数据权限降级为仅自己，确认删除角色么？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            delrolesapi(changeroleId.value).then((res) => {
                console.log(res)
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                iptflag.value = true
                tabs_itemflag.value = 0
                getroles()
                wait(200)
                getmenutree(roleid.value)
                getrolesdetail(roleid.value)
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消'
            })
            iptflag.value = true
        })
}
// 角色名称更改
const changeover = () => {
    iptflag.value = true
}
const changeallornone = () => {
    console.log(changeform.allornone)
    if (changeform.allornone === '全选') {
        setCheckedKeys1(allpower.value)
    } else {
        setCheckedKeys1([])
    }
}
const changeform = reactive({
    allornone: ''
})

interface Tree {
    id: number
    label: string
    children?: Tree[]
}

const id = 1000
// input3  请输入成员名称/部门分组
const input3 = ref('')
const rolename = ref('')
const dataSource = ref<Tree[]>([])

interface Tree {
    id: number
    label: string
    children?: Tree[]
}

const treeRef = ref<InstanceType<typeof ElTree>>()
const treeRef1 = ref<InstanceType<typeof ElTree>>()
const defaultProps = {
    children: 'children',
    label: 'label'
}
const checkedKeys = ref([])
const treedata = ref([])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: ''
})
const ruleForm1 = reactive({
    rolename: '',
    num: 1,
    str: ''
})
const depuser = ref([])
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 3, max: 40, message: '名称至少3位', trigger: 'blur' }
    ]
})
const rules1 = reactive<FormRules>({
    rolename: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { max: 40, message: '不能超过40位', trigger: 'blur' }
    ],
    str: [{ required: true, message: '请输入权限字符', trigger: 'blur' }],
    num: [{ required: true }]
})
const submitForm = async (formEl: FormInstance | undefined) => {
    const result = [
        ...treeRef.value!.getCheckedKeys(false),
        ...treeRef.value!.getHalfCheckedKeys()
    ]
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log("submit!");
            // console.log(treeRef.value!.getCheckedKeys(false));
            addroleapi({
                roleName: ruleForm1.rolename,
                status: '0',
                roleKey: ruleForm1.str,
                roleSort: ruleForm1.num,
                menuIds: result
            }).then((res) => {
                console.log(res)
                resetForm()
                dialogVisible.value = false
                getroles()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = () => {
    ruleForm1.rolename = ''
    ruleForm1.num = 1
    ruleForm1.str = ''
    setCheckedKeys([])
    allornone.value = false
    dialogVisible.value = false
}
const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`
}))
const activeName = ref('first')
const dialogVisible = ref<boolean>(false)
// 切换tab页
const handleClick = (tab: TabsPaneContext, event: Event) => {
    title.value = tab.props.label
    iptflag.value = true
    if (tab.props.label === '员工管理') {
        getdepartment()
    } else {
        getrolesapi().then((res: any) => {
            // console.log(res);
            roleoptions.value = res.rows
            userolenum.value = res.rows[0].peopleCount
            rowslist.value = res.rows
            roleid.value = res.rows[0].roleId
            rolename.value = res.rows[0].roleName
            const index = res.rows.findIndex((ele: any) => {
                return ele.roleKey === 'saas_operation_role'
            })
            croleid.value = res.rows[index].roleId
            wait(200)
            getmenutree(roleid.value)
            getrolesdetail(roleid.value)
            getallpower()
        })
    }
}
const title = ref<string>('员工管理')
// 返回上一级
const back = () => {
    window.history.back()
}
const addrole = () => {
    console.log('添加角色')
    dialogVisible.value = true
}
</script>
<style lang="scss" scoped>
.khzyfpbox {
    margin-top: -20px;
    border-top: 1px solid #f4f4f7;
    padding: 16px 0;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.fgline {
    background-color: rgba(250, 250, 252, 1);
    height: 26px;
    margin-top: 24px;
    margin-bottom: 10px;
    border-left: 5px solid rgba(2, 86, 255, 1);
    padding-left: 10px;
    font-size: 14px;
    line-height: 26px;
}

.closeinnerdrawer {
    cursor: pointer;
    position: fixed;
    top: 50px;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 59px;
    background-color: #0256ff;
    font-size: 14px;
    color: #ffffff;

    img {
        margin-top: 5px;
    }
}

.drawer {
    .closedrawer {
        cursor: pointer;
        position: fixed;
        top: 50px;
        right: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 59px;
        background-color: #0256ff;
        font-size: 14px;
        color: #ffffff;

        img {
            margin-top: 5px;
        }
    }

    .top {
        // background-color: red;
        display: flex;
        align-items: center;

        .top_l_img {
            margin-right: 14px;
            width: 56px;
            height: 56px;
            border-radius: 4px;

            img {
                width: 100%;
                border-radius: 4px;
                height: 100%;
            }
        }

        .top_c_msg {
            flex: 1;

            .number_power {
                display: flex;
                align-items: center;
            }

            .name_sex {
                display: flex;
                align-items: center;
            }
        }
    }
}

.company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px 15px 20px;
    border-bottom: 1px solid rgba(244, 244, 247, 1);
    margin-bottom: 10px;
}

.tab {
    background-color: #ffffff;
    padding: 16px;
    min-height: 800px;

    .el-tab-pane1 {
        min-height: 747px;
        overflow: auto;
        background-color: rgba(250, 250, 252, 1);
        display: flex;
        padding: 16px;
        box-sizing: border-box;

        .tab_l {
            width: 30%;
            margin-right: 16px;

            .content {
                overflow: auto;
                min-height: 673px;
            }
        }

        .tab_r {
            width: 69%;

            .content {
                min-height: 673px;
                overflow: auto;
            }
        }
    }

    .wmax {
        width: 100%;
    }

    .el-tab-pane2 {
        min-height: 747px;
        overflow: auto;
        background-color: rgba(250, 250, 252, 1);
        padding: 16px;
        box-sizing: border-box;

        .tab_b {
            margin-top: 16px;
            display: flex;

            .el-card {
                padding: 0 !important;
            }

            .tab_b_l {
                width: 20%;
                margin-right: 16px;

                .tabs {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .tabs_item {
                        cursor: pointer;
                        width: 100%;
                        height: 52px;
                        line-height: 52px;
                        text-align: center;
                    }
                }

                .content {
                    overflow: auto;
                    height: 575px;
                }
            }

            .tab_b_r {
                width: 79%;
                position: relative;

                .zzc {
                    z-index: 100;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 90%;
                    // background-color: rgba(0, 0, 0, 0.3);
                }

                .content {
                    overflow: auto;
                    min-height: 575px;

                    .bottom {
                        margin-top: 20px;
                        height: 400px;
                        overflow-y: auto;
                        box-sizing: border-box;
                        background-color: #fafafc;
                    }

                    .top {
                        box-sizing: border-box;
                        // padding: 0 20px 0 20px;
                        height: 52px;
                        background-color: rgba(235, 239, 254, 1);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .icon-del-change {
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            cursor: pointer;
                        }

                        span {
                            color: rgba(2, 86, 255, 1);
                            font-size: 14px;
                            margin-right: 10px;
                        }

                        img {
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.powertext a:hover {
    background-color: rgba(235, 239, 254, 1);
    color: rgba(62, 95, 245, 1);
}

.powertext a {
    // background-color: red;
    display: block;
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 100%;
    cursor: pointer;
}

.active {
    box-sizing: border-box;
    background-color: rgba(224, 234, 255, 1);
    color: rgba(2, 86, 255, 1);
    border-right: 2px solid rgba(2, 86, 255, 1);
}

.imga {
    display: none;
}

.imgb {
    display: block;
}

.blue {
    color: #3e5ff5;
}

.changeoraddsalerbox {
    display: flex;
    align-items: center;
    justify-content: center;

    .lable {
        margin-right: 16px;
    }
}

.el-tab-pane2 :deep(.el-tree) {
    background-color: #fafafc !important;
}
</style>
